﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Profile.aspx.cs" Inherits="SonCa.SocialNetwork.Profiles.Profile"
    MasterPageFile="~/Home.Master" %>

<%@ Register Src="~/ASCX/UploadZone.ascx" TagName="UploadZone" TagPrefix="uc4" %>
<%@ Register Src="~/Profiles/ASCX/HomeRight.ascx" TagName="HomeRight" TagPrefix="uc5" %>

<asp:Content ContentPlaceHolderID="main" ID="Content1" runat="server">           
  <script type="text/javascript">
      $(document).ready(function () {
          $('#friendsDisplay').load("../Friends/FriendsDisplay.aspx");

          $("#hoverImgAvatar").mouseover(function () {
              $("#hoverEditAvatar").show();
          })

          $("#hoverImgAvatar").mouseleave(function () {
              $("#hoverEditAvatar").hide();
          })

          $('#btnEditAvatar').click(function () {
              $('#popupEditAvatar').fadeIn(300);

              var popMargTop = ($('#popupEditAvatar').height() + 24) / 2;
              var popMargLeft = ($('#popupEditAvatar').width() + 24) / 2;

              $('#popupEditAvatar').css({
                  'margin-top': -popMargTop,
                  'margin-left': -popMargLeft
              });

              $('body').append('<div id="mask_edit"></div>');
              $('#mask').fadeIn(300);

              document.getElementById("<%=imgAvatar_popup.ClientID%>").style.display = "block";
              $('#display_img').hide();
              document.getElementById("<%=fuAvatarUpload.ClientID%>").value = "";
              document.getElementById("<%=btnSubmitEditAvatar.ClientID%>").disabled = true;

              return false;
          });

          $('a.close_popup_edit, #mask_edit').live('click', function () {
              $('#mask_edit , .editavatar-popup').fadeOut(300, function () {
                  $('#mask_edit').remove();
              });
              return false;
          });
      });

        function DisplayImage(input) {
            if (input.files && input.files[0]) {
                document.getElementById("<%=btnSubmitEditAvatar.ClientID%>").disabled = false;
                document.getElementById("<%=imgAvatar_popup.ClientID%>").style.display = "none";
                $('#display_img').show();

                var reader = new FileReader();

                reader.onload = function (e) {
                    $('#display_img')
                        .attr('src', e.target.result)
                        .width(200)
                        .height(200);
                };
                reader.readAsDataURL(input.files[0]);
          }
        }        
  </script>

  <!-- Popup Update Avatar -->
    <div id="popupEditAvatar" class="editavatar-popup">
        <a href="#" class="close_popup_edit"><img src="../img/close.png" class="btn_close" title="Close Window" alt="Close" /></a>
        <div>
        <asp:Panel ID="pnlUpload" runat="server" Visible="true" onload="pnlUpload_Load">
            <div>
            <form method="post" enctype="multipart/form-data" action="Profile.aspx">
            <fieldset>
                <div class="divContainerTitle">Upload avatar</div>
                <table width="100%">
                    <tr>
                        <td style="width: 205px;">
                            <div style="width: 200px; height: 200px; border: solid 1px #000000; padding: 5px;">
                            <asp:Image runat="server" ID="imgAvatar_popup" Height="200" Width="200" Style="display:block" />                                
                                <img id="display_img" src="#" alt="your image" width="200px" height="200px" style="display:none" />
                            </div>
                        </td>
                        <td valign="top">
                            <div style="padding: 5px; float: left;">
                                Avatar:
                            </div>
                            <br />
                            <asp:FileUpload Width="270px" Size="28" ID="fuAvatarUpload" runat="server" onchange="DisplayImage(this);" />
                            <asp:Button ID="btnSubmitEditAvatar" runat="server" Text="Submit" onclick="btnSubmitEditAvatar_Click" />
                            <p />
                            <table width="100%">
                                <tr>
                                    <td style="padding-left: 5px;">
                                        Upload hình ảnh với độ phân giải 200x200 pixel (<i>Xem khung hình ở bên trái</i>) để có hình đẹp nhất.
                                    </td>
                                </tr>
                                <tr>
                                    <td style="padding: 5px;">
                                        <asp:Label ForeColor="Red" ID="lblMessage" runat="server"></asp:Label>
                                    </td>
                                </tr>
                            </table>
                            <p />
                        </td>
                    </tr>
                </table>
            </fieldset>
            </form>
            </div>
        </asp:Panel>
        </div>        
	</div>
    <!-- End Popup Update Avatar -->

    <div class="container">
        <div class="row">
            <!-- Left -->
            <div class="span3">
                <div class="row">
                    <div class="span3">
                        <div class="bg_goc thongtin">                            
                            <div style="position:relative" id="hoverImgAvatar">                                                   
                                <a href="../Personals/PersonalPage.aspx">                                
                                    <asp:Image ID="imgAvatar" runat="server" ImageUrl="~/Images/ProfileAvatar/ProfileImage.aspx" Width="200" Height="200" />                                                                                               
                                </a>
                                <span id="hoverEditAvatar" class="hover_btnedit">
                                    <input type="button" id="btnEditAvatar" value="Cập nhật avatar" />                                    
                                </span>                            
                            </div>                            

                            <div class="name1 mgleft10 mgtop10 mgbt10">
                                <a href="../Personals/PersonalPage.aspx"><asp:Label ID="lblProfileName" runat="server" Text="No Name"></asp:Label></a>
                            </div>
                            <%--<div class="icon_gioithieu">Giới thiệu</div>
                            <div class="icon_list">List bài hát của tôi</div>
                            <div class="icon_hoatdong">Hoạt động</div>
                            <div class="icon_album">Album</div>
                            <div id="dialog" style="display: none;"></div>--%>
                        </div>
                        <%--<div class="bg_goc pad">
                            <div class="icon_banbe title4">bạn bè</div>
                        </div>
                        <div class="bg_goc pad">
                            <div class="icon_room title4">Room</div>
                        </div>
                        <div class="bg_goc pad">
                            <div class="icon_record title4">Record</div>
                        </div>
                        <div class="bg_goc pad">
                            <div class="icon_blog title4">Blog</div>
                        </div>
                        <div class="bg_goc pad mgtop10">
                            <div class="icon_group title4">group</div>
                            <div class="mgleft10 pad2">
                                <div class="icon_notnhac">
                                    <a href="#">Nhạc Việt Nam</a></div>
                                <div class="icon_notnhac">
                                    <a href="#">Nhạc Quê hương</a></div>
                                <div class="icon_notnhac">
                                    <a href="#">Nhạc Thiếu nhi</a></div>
                                <div class="icon_notnhac">
                                    <a href="#">Nhạc Cách mạng</a></div>
                                <div class="icon_notnhac">
                                    <a href="#">Nhạc Pop/ Rock</a></div>
                                <div class="icon_notnhac">
                                    <a href="#">Nhạc Audiophile</a></div>
                                <div class="icon_notnhac">
                                    <a href="#">Nhạc Âu/ Mỹ</a></div>
                                <div class="icon_notnhac">
                                    <a href="#">Nhạc Trữ tình</a></div>
                            </div>
                        </div>
                        <div class="bg_goc pad">
                            <div class="icon_hat title4">
                                hát với người nổi tiếng</div>
                        </div>
                        <div class="bg_goc pad">
                            <div class="icon_event title4">
                                event</div>
                        </div>
                        <div class="bg_goc pad">
                            <div class="icon_daotao title4">
                                đào tạo ca sĩ</div>
                        </div>
                        <div class="bg_goc pad">
                            <div class="icon_hoatdongoffline title4">
                                hoạt động offline</div>
                        </div>
                        <div class="bg_goc pad">
                            <div class="icon_xephang title4">
                                xếp hạng thành viên</div>
                            <div class="pad2">
                                <img src="../img/img5.jpg" width="177" height="57" /></div>
                        </div>
                        <div class="pad">
                            <div class="icon_khoungdung title4">
                                kho ứng dụng</div>
                            <div class="pad2">
                                <img src="../img/ungdung1.jpg" width="32" height="32" class="cpos_1 img" />
                                <div>
                                    <a href="#"><strong>Photo</strong></a></div>
                                <div>
                                    2.123.123 lượt truy cập</div>
                                <div class="clearer">
                                </div>
                                <div class="mgtop10">
                                    <img src="../img/ungdung2.jpg" width="32" height="32" class="cpos_1 img" />
                                    <div>
                                        <a href="#"><strong>Võ lâm chi mộng</strong></a></div>
                                    <div>
                                        2.123.123 lượt truy cập</div>
                                    <div class="clearer">
                                    </div>
                                </div>
                                <div class="mgtop10">
                                    <img src="../img/ungdung3.jpg" width="32" height="32" class="cpos_1 img" />
                                    <div>
                                        <a href="#"><strong>Gunny II</strong></a></div>
                                    <div>
                                        2.123.123 lượt truy cập</div>
                                    <div class="clearer">
                                    </div>
                                </div>
                            </div>
                        </div>--%>
                    </div>
                </div>                
            </div>
            <!-- End Left -->

            <!-- Middle -->
            <div class="span6 box_center">
                <div class="row">
                    <div class="span6">
                        <%--<div style=" width: 100%;">                    
                            <div class="icon_baihat title5">Bài hát bình chọn nhiều nhất</div>                            
                            <div class="box_100">
                                <img src="../img/img6.jpg" width="100" height="100" />
                                <div class="title6">Indi Phuong</div>
                                <div>Cấp độ: HOA</div>
                                <div class="icon_diem">2036 điểm</div>
                                <div class="icon_addfriend">add friend</div>
                            </div>
                            <div class="box_100">
                                <img src="../img/img7.jpg" width="100" height="100" />
                                <div class="title6">Indi Phuong</div>
                                <div>Cấp độ: HOA</div>
                                <div class="icon_diem">2036 điểm</div>
                                <div class="icon_addfriend">add friend</div>
                            </div>
                            <div class="box_100">
                                <img src="../img/img8.jpg" width="100" height="100" />
                                <div class="title6">Indi Phuong</div>
                                <div>Cấp độ: HOA</div>
                                <div class="icon_diem">2036 điểm</div>
                                <div class="icon_addfriend">add friend</div>
                            </div>
                            <div class="box_100" style="margin-right: 0px;">
                                <img src="../img/img9.jpg" width="100" height="100" />
                                <div class="title6">Indi Phuong</div>
                                <div>Cấp độ: HOA</div>
                                <div class="icon_diem">2036 điểm</div>
                                <div class="icon_addfriend">add friend</div>
                            </div>                    
                        </div>                        
                        <div class="clearer"></div>--%>
                        <!-- Upload zone -->
                        <div class="mgtop30">
                            <uc4:UploadZone ID="UploadZone1" runat="server" />
                            <div id="friendsDisplay"></div>
                        </div>
                        <!-- End Upload zone -->                        
                    </div>
                </div>
            </div>
            <!-- End Middle -->

            <!-- Right -->
            <%--<div>
                <uc5:HomeRight ID="HomeRight1" runat="server" />
            </div>--%>
            <!-- End Right -->
        </div>
    </div>
</asp:Content>
